<template>
  <div class="headTab">
    <el-menu
      :default-active="this.$route.path"
      class="el-menu-demo"
      mode="horizontal"
      :router="true"
    >
      <el-menu-item index="/diyRecommend"
        >个性推荐</el-menu-item
      >
      <el-menu-item index="/songList">歌单</el-menu-item>
      <el-menu-item index="/rank">排行榜</el-menu-item>
      <el-menu-item index="/singerList">歌手</el-menu-item>
      <el-menu-item index="/newMusic">最新音乐</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "headTab",
  components: {},
  data() {
    return {};
  },
};
</script>

<style lang='less' scoped>
/* 点击出来的下划线进行修改 */
.headTab{
  width: 100%;
  background-color: #fff;
  opacity: .9;
}
.el-menu-demo {
  // width: 100%;
  border-radius: 5px;
  border-bottom: none;
  width: 460px;
  display: flex;
  justify-content: space-evenly;
  /deep/.el-menu-item {
    flex: 1;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 10px;
    border-bottom: none;
    border-radius: 5px;
    color: rgb(83, 81, 81);
    font-size: 17px;
    font-weight: 600;
  }
  /deep/.el-menu-item:hover {
    background-color: rgba(184, 178, 178, 0.918);
    color: #fff;
  }
  /deep/.el-menu-item:focus,
  /deep/.el-menu-item.is-active {
    border-bottom: none;
    background-color: #F6F6F8;
  }
}
</style>
